<button class="po-page-login-support" (click)="activateSupport()" [hidden]="!support">
  <po-icon p-icon="ICON_HELP"></po-icon>
  {{ pageLoginLiterals?.support }}
</button>

<po-page-background
  #pageLogin
  [p-components-size]="componentsSize"
  [p-show-select-language]="showLanguage"
  [p-languages]="languagesList"
  [p-initial-language]="initialSelectLanguage"
  [p-background]="background"
  [p-highlight-info]="pageLoginLiterals.highlightInfo"
  [p-logo]="logo"
  [p-secondary-logo]="secondaryLogo"
  (p-selected-language)="onSelectedLanguage($event)"
>
  <header class="po-page-login-header">
    <div class="po-page-login-header-product-name">
      <h1>{{ productName }}</h1>
    </div>

    <div class="po-page-login-header-product-environment po-mb-md-4 po-mb-sm-1">
      @if (environment) {
        <po-tag p-type="warning" [p-value]="environment"> </po-tag>
      }
    </div>
    <div class="po-page-login-header-welcome po-mb-md-4 po-mb-sm-2">{{ pageLoginLiterals.welcome }}</div>
  </header>

  <form #loginForm="ngForm" class="po-page-login-form">
    <div class="po-row">
      <div class="po-lg-12">
        <div class="po-page-login-hint po-page-login-info-container">
          <po-login
            class="po-page-login-info-field"
            [class.po-page-login-info-field-dynamic]="
              !pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint
            "
            name="login"
            [(ngModel)]="login"
            p-auto-focus
            p-required
            [p-label]="pageLoginLiterals.loginLabel"
            [p-no-autocomplete]="noAutocompleteLogin"
            [p-pattern]="loginPattern"
            [p-placeholder]="pageLoginLiterals.loginPlaceholder"
            [p-size]="componentsSize"
            (click)="closePopover()"
            (keyup.enter)="loginForm.valid && onLoginSubmit()"
            (p-change-model)="changeLoginModel()"
          >
          </po-login>

          @if (pageLoginLiterals.loginHint || pageLoginLiterals.rememberUserHint) {
            <div
              class="po-page-login-info-icon-container"
              [class.po-page-login-info-icon-container-dynamic]="
                !pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint
              "
            >
              @if (pageLoginLiterals.loginHint) {
                <po-icon
                  p-icon="ICON_INFO po-field-icon"
                  p-tooltip-position="right"
                  [p-tooltip]="pageLoginLiterals.loginHint"
                >
                </po-icon>
              }
            </div>
          }
        </div>

        <div class="po-field-container-bottom po-field-container-error-container">
          @for (error of allLoginErrors; track error) {
            <div class="po-field-container-bottom-text-error po-field-container-error-item">
              <po-icon p-icon="ICON_EXCLAMATION"></po-icon>
              <span class="po-field-error-message">{{ error }}</span>
            </div>
          }
        </div>
      </div>

      <div class="po-lg-12">
        <div class="po-page-login-password-container">
          <po-password
            class="po-page-login-field-size po-page-login-password-item"
            [class.po-page-login-field-size-dynamic]="
              !pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint
            "
            name="password"
            [(ngModel)]="password"
            p-required
            [p-hide-password-peek]="hidePasswordPeek"
            [p-label]="pageLoginLiterals.passwordLabel"
            [p-no-autocomplete]="noAutocompletePassword"
            [p-pattern]="passwordPattern"
            [p-placeholder]="pageLoginLiterals.passwordPlaceholder"
            [p-size]="componentsSize"
            (click)="closePopover()"
            (keyup.enter)="loginForm.valid && onLoginSubmit()"
            (p-change-model)="changePasswordModel()"
          >
          </po-password>
          @if (pageLoginLiterals.loginHint || pageLoginLiterals.rememberUserHint) {
            <div class="po-page-login-password-item po-page-login-password-popover-container">
              @if (showExceededAttemptsWarning && exceededAttemptsWarning) {
                <po-page-login-popover
                  [p-literals]="pageLoginLiterals"
                  [p-recovery]="recovery"
                  [p-remaining-attempts]="exceededAttemptsWarning"
                  (p-forgot-password)="openUrl($event)"
                >
                </po-page-login-popover>
              }
            </div>
          }
        </div>
        <div class="po-field-container-bottom po-field-container-error-container">
          @for (error of allPasswordErrors; track error) {
            <div class="po-field-container-bottom-text-error po-field-container-error-item">
              <po-icon p-icon="ICON_EXCLAMATION"></po-icon>
              <span class="po-field-error-message">{{ error }}</span>
            </div>
          }
        </div>
      </div>

      @if (customField && customFieldType === 'input') {
        <po-input
          [class.po-page-login-field-size-dynamic]="!pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint"
          class="po-page-login-field-size po-lg-12"
          name="customFieldInput"
          [(ngModel)]="customFieldObject.value"
          p-required
          [p-error-pattern]="customFieldObject.errorPattern || pageLoginLiterals.customFieldErrorPattern"
          [p-pattern]="customFieldObject.pattern"
          [p-placeholder]="customFieldObject.placeholder || pageLoginLiterals.customFieldPlaceholder"
          [p-size]="componentsSize"
          (keyup.enter)="loginForm.valid && onLoginSubmit()"
        >
        </po-input>
      }

      @if (customField && customFieldType === 'combo') {
        <po-combo
          [class.po-page-login-field-size-dynamic]="!pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint"
          class="po-page-login-field-size po-lg-12"
          name="customFieldCombo"
          [(ngModel)]="customFieldObject.value"
          p-required
          [p-field-value]="customFieldObject.fieldValue"
          [p-filter-service]="customFieldObject.url"
          [p-placeholder]="customFieldObject.placeholder || pageLoginLiterals.customFieldPlaceholder"
          [p-size]="componentsSize"
        >
        </po-combo>
      }

      @if (customField && customFieldType === 'select') {
        <po-select
          [class.po-page-login-field-size-dynamic]="!pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint"
          class="po-page-login-field-size po-lg-12"
          name="customFieldSelect"
          [(ngModel)]="customFieldObject.value"
          p-required
          [p-placeholder]="customFieldObject.placeholder || pageLoginLiterals.customFieldPlaceholder"
          [p-options]="customFieldObject.options"
          [p-size]="componentsSize"
        >
        </po-select>
      }

      <div class="po-lg-12">
        @if (!hideRememberUser) {
          <div class="po-page-login-hint po-page-login-info-container">
            <po-switch
              class="po-page-login-info-field po-lg-7 po-offset-lg-5 po-offset-xl-5"
              name="rememberUser"
              [(ngModel)]="rememberUser"
              p-label-position="1"
              [p-label-off]="pageLoginLiterals.rememberUser"
              [p-label-on]="pageLoginLiterals.rememberUser"
              [p-size]="componentsSize"
              (keyup.enter)="loginForm.valid && onLoginSubmit()"
              [p-hide-label-status]="hideLabelStatus"
            >
            </po-switch>
            @if (pageLoginLiterals.loginHint || pageLoginLiterals.rememberUserHint) {
              <div
                class="po-page-login-info-icon-container po-page-login-info-icon-remember-user"
                [class.po-page-login-info-icon-container-dynamic]="!pageLoginLiterals.rememberUserHint"
              >
                @if (pageLoginLiterals.rememberUserHint) {
                  <po-icon
                    p-icon="ICON_INFO po-field-icon"
                    p-tooltip-position="right"
                    [p-tooltip]="pageLoginLiterals.rememberUserHint"
                  >
                  </po-icon>
                }
              </div>
            }
          </div>
        }
      </div>

      <po-button
        [class.po-page-login-button-dynamic]="!pageLoginLiterals.loginHint && !pageLoginLiterals.rememberUserHint"
        class="po-lg-12 po-page-login-button po-page-login-field-size"
        p-kind="primary"
        [p-disabled]="loginForm.invalid"
        [p-label]="loading ? pageLoginLiterals.submittedLabel : pageLoginLiterals.submitLabel"
        [p-loading]="loading"
        [p-size]="componentsSize"
        (p-click)="onLoginSubmit()"
      >
      </po-button>

      @if (recovery) {
        <div class="po-page-login-recovery-link">
          <a class="po-font-text-large-bold" (click)="openUrl(recovery)">{{ pageLoginLiterals.forgotPassword }}</a>
        </div>
      }

      @if (registerUrl) {
        <div class="po-page-login-register-link">
          <a class="po-font-text-large-bold" (click)="openUrl(registerUrl)">{{ pageLoginLiterals.registerUrl }}</a>
        </div>
      }
    </div>
  </form>
</po-page-background>
